
// 使用替换标签属性方式实现 图片懒加载

;(function (win, doc) {
  const oImgList = doc.getElementsByClassName('img-list')[0],
      data = JSON.parse(doc.querySelector('#img_data').innerHTML),
      imgTpl = doc.getElementById('img_Tpl').innerHTML,
      oImgs = doc.getElementsByClassName('list-img');

  const init = () => {
    oImgList.innerHTML = renderList(data);
    bindEvent();
    setTimeout(() => { // 滚动条归0(置顶)
      win.scrollTo(0, 0);
    }, 150);
  }

  function bindEvent() {
    // 当页面加载(首屏可视区域)、页面滚动时 加载图片
    window.onload = window.onscroll = throttle(imgLazyLoad(oImgs), 300)
  }

  function renderList(data) { // 渲染模板、数据
    let list = '';

    data.forEach(item => {
      list += imgTpl.replace(/\{\{(.*?)\}\}/g, (node, key) => {
        // console.log(node, key);
        return {
          img: item.img,
          name: item.name
        }[key]
      })
    })
    // console.log(list);
    return list;
  }

  init();
})(window, document);
  
function imgLazyLoad(images) {
  const imgLen = images.length;
  let n = 0;

  return function () {
    // 获取屏幕的可视区域高度、滚动高度
    const cHeight = document.documentElement.clientHeight,
          sTop = document.documentElement.scrollTop || document.body.scrollTop;
    let imgItem = null;

    // 当元素距顶部的高度 < 可视区域高度 + 滚动高度 说明进入了视线范围内
    for (let i = n; i < imgLen; i ++) {
      imgItem = images[i];

      if (imgItem.offsetTop < cHeight + sTop) {
        // 把自定义的属性数据 重新赋值给 src 实现加载
        imgItem.src = imgItem.getAttribute('data-src');
        imgItem.removeAttribute('data-src');
        n++;
      }
    }
  }
}